<template>
  <section class="todoapp">
    <!-- 除了驼峰, 还可以使用-转换链接 -->
    <TodoHeader @addTask=" addTaskHandler"></TodoHeader>
    <TodoMain @delTask="delTaskHandler" :list="showList"></TodoMain>
    <TodoFooter @clearDone="clearDownHandle" @changeTask="changeTaskHandler" :list="list"></TodoFooter>
  </section>
</template>

<script>
//目标1:渲染列表
//1.1在App.vue中声明数据list,并传递给子组件TodoMain.
//1.2使用v-for循环渲染li,动态绑定数据
//1.3使用v-model绑定勾选状态

//1.4动态class根据isDone来绑定类名
// 1.0样式引入

// 目标2:添加数据
// 2.1在TodoHeader.vue中双向绑定文本框,同时绑定键盘按下事件(.enter修饰符)
// 2.2当用户输入内容后按下回车时，将任务名传递给父组件
// 2.3父组件封装成对象后添加到数组中
// 2.4在TodoHeader.vue中如果用户输入回车添加数据后,清空文本框
// 2.5非空效验

// 目标3:删除数据
// 3.1在TodoHeader.vue中给删除按钮绑定点击事件,并传入id
// 3.2利用子传父技术将id传递给父组件的App.vue中给删除按钮绑定点击事件
// 3.3在父组件中通过id找到对应数据的索引，删除数据
// 3.4数据全部删完后再添加需要处理id的bug

//目标4：剩余数量统计
//4.1在App.vue中将list传入TodoFooter.vue
//4.2在剩余数量处使用插值表达式渲染list.length

//目标5：数据切换
// 需求1:点谁谁亮

// 5.1定义状态isAll取值范围是all/ye/No
// 5.2给三个a标签绑定动态class，分别判断是自己的状态时才应用selected类名
// 5.3给三个a标签绑定点击事件，点击时切换isSel为自己的状态

//父传子的流程:
//子组件中定义props接受数据,并使用
//父组件中绑定属性传递数据

//子传父的流程:
//父组件中给子组件绑定一个自定义事件
//子组件在恰当的时机触发事件并传递数据

import "./styles/base.css"
import "./styles/index.css"
    //引入组件
import TodoHeader from "./components/TodoHeader.vue";
import TodoMain from "./components/TodoMain.vue";
import TodoFooter from "./components/TodoFooter.vue";


export default {
  // 注册组件
  components: {
   TodoHeader,
TodoMain,
TodoFooter,
  },
  data(){
    return{

 
    list:[
      
        { id: 100, name: "吃饭", isDone: true },
        { id: 201, name: "睡觉", isDone: false },
        { id: 103, name: "打豆豆", isDone: true },
      
    ],
    isSel:'all'
       }
  },
  methods:{
    // 这里是添加子组件中传来的数据到本父组件的list之中

    addTaskHandler(taskName){
      this.list.push({
        id: this.list[this.list.length-1].id+1,
        name:taskName,
        isDone:false
      })
    },
    delTaskHandler(id){
      console.log(id);
      //根据id找索引
      let index=this.list.findIndex(item=>item.id===id)
      this.list.splice(index,1)
    },
    changeTaskHandler(isSel){
      this.isSel=isSel
    },
    clearDownHandle(){
//删除已完成
//直接操作原数组list级可
this.list.filter(item=>!item.isDone)
    }
  
  },
  computed:{
    showList(){
      if(this.isSel==='no'){
        return this.list.filter(item=>!item.isDone)
      }
      else if(this.isSel==='yes'){
        return this.list.filter(item=>item.isDone)
      }
      else{
         return this.list
      }
    } 
  }
};
</script>